<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
</template>

<script>
//vue3的生命周期函数与vue2基本相同，只有两个函数名字调整
// beforeDestroy -> beforeUnmount
// destroyed -> unmounted

//引入组合式api
import 
    { 
        ref, 
        onBeforeMount, 
        onMounted, 
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
    } from 'vue';
export default {
  name: 'Demo', 
  setup() {
    let sum = ref(0)
    console.log('---setup---')
    //2.通过组合式api指定生命周期函数（如果同时写了组合式api和配置项，则组合式api早于配置项执行，但不建议这样写）
    /*
        对应关系：
        beforeCreate => setup (没有组合式api，用setup代替)
        created => setup (没有组合式api，用setup代替)
        beforeMount => onBeforeMount
        mounted => onMounted
        beforeUpdate => onBeforeUpdate
        updated => onUpdated
        beforeUnmount => onBeforeUnmount
        unmounted => onUnmounted
    */
    onBeforeMount(()=>{
        console.log('---onBeforeMount---')
    })
    onMounted(()=>{
        console.log('---onMounted---')
    })
    onBeforeUpdate(()=>{
        console.log('---onBeforeUpdate---')
    })
    onUpdated(()=>{
        console.log('---onUpdated---')
    })
    onBeforeUnmount(()=>{
        console.log('---onBeforeUnmount---')
    })
    onUnmounted(()=>{
        console.log('---onUnmounted---')
    })

    return {
        sum,
    }
  },
  //1.通过配置项指定生命周期函数
  //#region 
  /*
  beforeCreate() {
    console.log('---beforeCreate---')
  },
  created() {
    console.log('---created---')
  },
  beforeMount() {
    console.log('---beforeMount---')
  },
  mounted() {
    console.log('---mounted---')
  },
  beforeUpdate() {
    console.log('---beforeUpdate---')
  },
  updated() {
    console.log('---updated---')
  },
  beforeUnmount() {
    console.log('---beforeUnmount---')
  },
  unmounted() {
    console.log('---unmounted---')
  }
  */
  //#endregion
}
</script>

<style>
</style>